<template>
  <div>
    <group-member-list :groupProfile="groupProfile" />
    <div class="info-item">
      <div class="label">群ID</div>
      <div class="content">{{ groupProfile.groupID }}</div>
    </div>
    <div class="info-item">
      <div class="label">
        群头像
        <i
          class="el-icon-edit"
          v-if="editable"
          @click="
            showEditFaceUrl = true
            inputFocus('editFaceUrl')
          "
        />
      </div>
      <div class="content" v-if="!showEditFaceUrl" style="display:flex;align-items:center;">
        <avatar :src="groupProfile.avatar" text="G" style="margin-right:6px;" />
      </div>
      <el-input
        ref="editFaceUrl"
        v-else
        autofocus
        v-model="avatar"
        size="mini"
        @blur="showEditFaceUrl = false"
        @keydown.enter.native="editFaceUrl"
      />
    </div>

    <div class="info-item">
      <div class="label">群类型</div>
      <div class="content">{{ groupProfile.type }}</div>
    </div>
    <div class="info-item">
      <div class="label">
        群名称
        <i
          class="el-icon-edit"
          v-if="editable"
          @click="
            showEditName = true
            inputFocus('editName')
          "
        />
      </div>

      <div class="content text-ellipsis" v-if="!showEditName">{{ groupProfile.name || '暂无' }}</div>
      <el-input
        ref="editName"
        v-else
        autofocus
        v-model="name"
        size="mini"
        @blur="showEditName = false"
        @keydown.enter.native="editName"
      />
    </div>
    <div class="info-item">
      <div class="label">
        群介绍
        <i
          class="el-icon-edit"
          v-if="editable"
          @click="
            showEditIntroduction = true
            inputFocus('editIntroduction')
          "
        />
      </div>
      <div
        class="content text-ellipsis"
        v-if="!showEditIntroduction"
      >{{ groupProfile.introduction || '暂无' }}</div>
      <el-input
        ref="editIntroduction"
        v-else
        autofocus
        v-model="introduction"
        size="mini"
        @blur="showEditIntroduction = false"
        @keydown.enter.native="editIntroduction"
      />
    </div>
    <div class="info-item">
      <div class="label">
        群公告
        <i
          class="el-icon-edit"
          v-if="editable"
          @click="
            showEditNotification = true
            inputFocus('editNotification')
          "
        />
      </div>
      <div
        class="content text-ellipsis"
        v-if="!showEditNotification"
      >{{ groupProfile.notification || '暂无' }}</div>

      <el-input
        ref="editNotification"
        v-else
        autofocus
        v-model="notification"
        size="mini"
        @blur="showEditNotification = false"
        @keydown.enter.native="editNotification"
      />
    </div>
    <div class="info-item" v-if="groupProfile.type !== 'Private'">
      <div class="label">
        申请加群方式
        <i
          class="el-icon-edit"
          v-if="joinOptionEditable"
          @click="
            showEditJoinOption = true
            inputFocus('editJoinOption')
          "
        />
      </div>
      <div class="content" v-show="!showEditJoinOption">{{ joinOptionMap[groupProfile.joinOption] }}</div>
      <el-select
        ref="editJoinOption"
        v-model="joinOption"
        v-show="showEditJoinOption"
        size="mini"
        automatic-dropdown
        @blur="showEditJoinOption = false"
        @change="editJoinOption"
      >
        <el-option label="自由加入" value="FreeAccess"></el-option>
        <el-option label="需要验证" value="NeedPermission"></el-option>
        <el-option label="禁止加群" value="DisableApply"></el-option>
      </el-select>
    </div>
    <div class="info-item">
      <div class="label">
        群消息提示类型
        <i
          class="el-icon-edit"
          v-if="editable"
          @click="
            showEditMessageRemindType = true
            inputFocus('editMessageRemindType')
          "
        />
      </div>
      <div
        class="content"
        v-show="!showEditMessageRemindType"
      >{{ messageRemindTypeMap[this.groupProfile.selfInfo.messageRemindType] }}</div>
      <el-select
        ref="editMessageRemindType"
        v-show="showEditMessageRemindType"
        v-model="messageRemindType"
        size="mini"
        automatic-dropdown
        @change="editMessageRemindType"
        @blur="showEditMessageRemindType = false"
      >
        <el-option label="接收消息并提示" value="AcceptAndNotify"></el-option>
        <el-option label="接收消息但不提示" value="AcceptNotNotify"></el-option>
        <el-option label="屏蔽消息" value="Discard"></el-option>
      </el-select>
    </div>
    <!-- <div class="info-item">
      <div class="label">
        我的群名片
        <i
          class="el-icon-edit"
          @click="
            showEditNameCard = true
            inputFocus('editNameCard')
          "
        />
      </div>
      <div class="content cursor-pointer" v-if="!showEditNameCard">
        {{ groupProfile.selfInfo.nameCard || '暂无' }}
      </div>
      <el-input
        ref="editNameCard"
        v-else
        autofocus
        v-model="nameCard"
        size="mini"
        @blur="showEditNameCard = false"
        @keydown.enter.native="editNameCard"
      />
    </div>-->
    <div v-if="isOwner">
      <el-button type="text" @click="showChangeGroupOwner = true">转让群组</el-button>
      <el-input
        v-if="showChangeGroupOwner"
        v-model="newOwnerUserID"
        placeholder="新群主的userID"
        size="mini"
        @blur="showChangeGroupOwner = false"
        @keydown.enter.native="changeOwner"
      />
    </div>
    <div>
      <el-button type="text" style="color:red;" @click="quitGroup">退出群组</el-button>
    </div>
    <div v-if="showDissmissGroup">
      <el-button type="text" style="color:red;" @click="dismissGroup">解散群组</el-button>
    </div>
  </div>
</template>

<script>
import GroupMemberList from './group-member-list.vue'
import { Select, Option } from 'element-ui'
export default {
  props: ['groupProfile'],
  components: {
    GroupMemberList,
    ElSelect: Select,
    ElOption: Option
  },
  data() {
    return {
      showEditName: false,
      showEditFaceUrl: false,
      showEditIntroduction: false,
      showEditNotification: false,
      showEditJoinOption: false,
      showChangeGroupOwner: false,
      showEditMessageRemindType: false,
      showEditNameCard: false,
      name: this.groupProfile.name,
      avatar: this.groupProfile.avatar,
      introduction: this.groupProfile.introduction,
      notification: this.groupProfile.notification,
      joinOption: this.groupProfile.joinOption,
      newOwnerUserID: '',
      messageRemindType: this.groupProfile.selfInfo.messageRemindType,
      nameCard: this.groupProfile.selfInfo.nameCard || '',
      messageRemindTypeMap: {
        AcceptAndNotify: '接收消息并提示',
        AcceptNotNotify: '接收消息但不提示',
        Discard: '屏蔽消息'
      },
      joinOptionMap: {
        FreeAccess: '自由加入',
        NeedPermission: '需要验证',
        DisableApply: '禁止加群'
      }
    }
  },
  computed: {
    editable() {
      return (
        this.groupProfile.type === this.TIM.TYPES.GRP_PRIVATE ||
        ['Owner', 'Admin'].includes(this.groupProfile.selfInfo.role)
      )
    },
    joinOptionEditable() {
      // 只有公开群才能修改 joinOption
      return (
        this.editable && this.groupProfile.type === this.TIM.TYPES.GRP_PUBLIC
      )
    },
    isOwner() {
      return this.groupProfile.selfInfo.role === 'Owner'
    },
    showDissmissGroup() {
      // 私有群不能解散
      return this.isOwner && this.groupProfile.type !== 'Private'
    }
  },
  watch: {
    groupProfile(groupProfile) {
      Object.assign(this, {
        showEditName: false,
        showEditFaceUrl: false,
        showEditIntroduction: false,
        showEditNotification: false,
        showEditJoinOption: false,
        showChangeGroupOwner: false,
        showEditNameCard: false,
        name: groupProfile.name,
        avatar: groupProfile.avatar,
        introduction: groupProfile.introduction,
        notification: groupProfile.notification,
        joinOption: groupProfile.joinOption,
        messageRemindType: groupProfile.messageRemindType,
        nameCard: groupProfile.selfInfo.nameCard || ''
      })
    }
  },
  methods: {
    inputFocus(ref) {
      this.$nextTick(() => {
        this.$refs[ref].focus()
      })
    },
    editName() {
      this.tim
        .updateGroupProfile({
          groupID: this.groupProfile.groupID,
          name: this.name.trim()
        })
        .then(() => {
          this.showEditName = false
        })
    },
    editFaceUrl() {
      this.tim
        .updateGroupProfile({
          groupID: this.groupProfile.groupID,
          avatar: this.avatar.trim()
        })
        .then(() => {
          this.showEditFaceUrl = false
        })
    },
    editIntroduction() {
      this.tim
        .updateGroupProfile({
          groupID: this.groupProfile.groupID,
          introduction: this.introduction.trim()
        })
        .then(() => {
          this.showEditIntroduction = false
        })
    },
    editNotification() {
      this.tim
        .updateGroupProfile({
          groupID: this.groupProfile.groupID,
          notification: this.notification.trim()
        })
        .then(() => {
          this.showEditNotification = false
        })
    },
    editJoinOption() {
      this.tim
        .updateGroupProfile({
          groupID: this.groupProfile.groupID,
          joinOption: this.joinOption
        })
        .then(() => {
          this.showEditJoinOption = false
        })
    },
    changeOwner() {
      this.tim
        .changeGroupOwner({
          groupID: this.groupProfile.groupID,
          newOwnerID: this.newOwnerUserID
        })
        .then(() => {
          this.showChangeGroupOwner = false
          this.$message({
            message: `转让群主成功，新群主ID：${this.newOwnerUserID}`
          })
          this.newOwnerUserID = ''
        })
    },
    quitGroup() {
      this.tim
        .quitGroup(this.groupProfile.groupID)
        .then(({ data: { groupID } }) => {
          this.$message({
            message: '退群成功',
            type: 'success'
          })
          if (groupID === this.groupProfile.groupID) {
            this.$store.commit('resetCurrentConversation')
          }
        })
    },
    dismissGroup() {
      this.tim
        .dismissGroup(this.groupProfile.groupID)
        .then(({ data: { groupID } }) => {
          this.$message({
            message: `群：${this.groupProfile.name ||
              this.groupProfile.groupID}解散成功！`,
            type: 'success'
          })
          if (groupID === this.groupProfile.groupID) {
            this.$store.commit('resetCurrentConversation')
          }
        })
    },
    editMessageRemindType() {
      this.tim
        .setMessageRemindType({
          groupID: this.groupProfile.groupID,
          messageRemindType: this.messageRemindType
        })
        .then(() => {
          this.showEditMessageRemindType = false
        })
    },
    editNameCard() {
      if (this.nameCard.trim().length === 0) {
        this.$message.warning('不能设置空的群名片')
        return
      }
      this.tim
        .setGroupMemberNameCard({
          groupID: this.groupProfile.groupID,
          nameCard: this.nameCard.trim()
        })
        .then(() => {
          this.showEditNameCard = false
        })
    }
  }
}
</script>

<style scpoed>
.info-item {
  margin: 12px 0;
}
.info-item .label {
  font-size: 0.8em;
  color: gray;
}
.cursor-pointer {
  cursor: pointer;
}
.el-icon-edit {
  cursor: pointer;
  font-size: 1.6rem;
}
</style>
